<template>
  <!-- 右侧窗口节点预览部分 -->
  <div class="node-perspective">
    <div type="background-color: white">
      <div class="perspective-title">
        <a-row type="flex" justify="space-around" align="middle">
          <a-col :span="23" justify="start" :offset="1">
            <span class="node-perspective-text">数据预览</span>
          </a-col>
        </a-row>
      </div>
      <keep-alive>
        <data-preview v-if="dataPreviewShow" />
      </keep-alive>
    </div>
    <div type="background-color: white">
      <div class="perspective-title visualization">
        <span class="node-perspective-text" :style="{ marginLeft: '12px' }"
          >可视化</span
        >
        <span class="new-visualization" @click="setVisualWindowShow">
          <a-icon type="plus" />
          <span>添加</span>
          <VisualWindow v-if="visible" :visible="visible" />
        </span>
      </div>
      <div v-show="visualizationShow" :class="visualizationStatus">
        <Visualization
          v-for="(widget, index) in widgetList"
          :key="index"
          :widget="widget"
          :current-type="'perspective'"
        />
        <div v-show="widgetList.length === 0" :style="{ textAlign: 'center' }">
          <img
            style="margin-top: 50px; width: 160px;"
            :src="publicPath + '/img/empty.svg'"
          />
          <div>暂无可视化</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import DataPreview from '@/components/studio/data/drawer/DataPreview.vue'
import Visualization from '@/components/studio/data/drawer/Visualization.vue'
import VisualWindow from '@/components/studio/data/drawer/VisualWindow.vue'
import DataViewStore from '@/store/modules/dataview'
import { Watch } from 'vue-property-decorator'
import { dealData } from '@/components/studio/data/util'
import { queryVisualById, getWidgetData } from '@/api/right-drawer'
import { removeNullEntries } from '@/util/recommend-visualization'
import { publicPath } from '@/api/constants'

@Component({
  components: { DataPreview, Visualization, VisualWindow },
})
export default class NodePerspective extends Vue {
  private publicPath = publicPath // 基础URL
  // 对可视化列表中的每个可视化查询具体配置
  public async getWidgetData(element: any) {
    const postData2 = {
      id: element.tid,
      type: 'task',
      widgetJson: element.data.widgetJson,
    }
    await getWidgetData({ data: postData2 }).then((result) => {
      if (result.data.code === 100) {
        const nowConfig = element.data.chartOptions
        let nowChartType = 'barChart'
        if (element.data.chartType.length > 1) {
          ;[nowChartType] = element.data.chartType
        } else {
          nowChartType = element.data.chartType
        }
        const nowData = dealData(result.data.result, nowChartType, element.data)
        // TODO: temp: remove null entries to avoid rendering error
        nowConfig.value = removeNullEntries(<any[]>nowData)
        nowConfig.size = [314, 140]
        nowConfig.tooltipIsShow = false
        nowConfig.legendIsShow = false
        nowConfig.labelIsShow = false
        const widget = {
          name: element.name,
          chartType: nowChartType,
          config: nowConfig,
          widgetId: element.id,
          formData: element.data.formData,
        }
        this.widgetList.push(widget)
      } else {
        this.widgetList.push({
          type: 'error',
          message: '数据出错，请删除后重新添加可视化',
          name: element.name,
          widgetId: element.id,
          formData: element.data.formData,
        })
      }
    })
  }

  // 查询可视化列表
  public async getWidgetList() {
    const postData = {
      tid: this.selectNode.id,
      type: 'task',
    }
    this.widgetList = []
    await queryVisualById({ data: postData }).then((response) => {
      if (response.data.code === 100) {
        response.data.result.forEach((element: any) => {
          this.getWidgetData(element)
        })
      }
    })
  }

  @Watch('selectNode')
  public async watchSelectNode() {
    if (this.selectNode) {
      this.getWidgetList()
    }
  }

  @Watch('visible')
  public async watchVisible() {
    if (this.visible === false) {
      this.getWidgetList()
    }
  }

  private config: any = {}
  private widgetList: any = []

  public get selectNode(): any {
    return DataViewStore.selectNode
  }

  public get visible() {
    return DataViewStore.getVisualWindowShow
  }

  private dataPreviewShow: boolean
  private visualizationShow: boolean
  private visualizationStatus: String

  constructor() {
    super()
    this.dataPreviewShow = true
    this.visualizationShow = true
    this.visualizationStatus = 'visualization-close'
  }

  public changeVisualShow() {
    this.visualizationShow = !this.visualizationShow
  }

  public setVisualWindowShow() {
    DataViewStore.setVisualWindowShow(true)
  }
}
</script>

<style lang="less" scoped>
.node-perspective {
  .node-perspective-text {
    color: #5d637e;
    font-size: 16px;
    font-weight: 600;
  }

  .perspective-title {
    background-color: #f5f5f5;
    height: 36px;
    margin-bottom: 8px;
    padding-top: 6px;

    &.visualization {
      align-items: center;
      display: flex;
      padding-top: 0;
    }
  }

  .icon-up {
    margin-right: 20px;
  }

  .add-visual {
    margin-left: 20px;
    width: 60px;
  }

  .visualization-open {
    height: calc(100vh - 230px);
    overflow-y: scroll;
  }

  .visualization-close {
    height: calc(100vh - 430px);
    overflow-y: scroll;
  }

  .new-visualization {
    align-items: center;
    background-color: #fff;
    border: 1px solid #6570ff;
    border-radius: 11px;
    color: #6570ff;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    height: 22px;
    justify-content: center;
    line-height: 22px;
    margin-left: 14px;
    padding: 0 5px;
    text-align: center;
    width: 62px;

    span {
      color: #6570ff;
      height: 22px;
    }

    &:hover {
      background-color: #6570ff;
      color: #fff;

      span {
        color: #fff;
      }
    }
  }
}
</style>
